/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019,  and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 活动列表
**/
<template>
  <div class="pr-activity-list">
    <el-button type="primary" size="small" @click="handleAddClick" v-if="userName == 'admin'">活动添加</el-button>

    <ul class="pr-card">
      <li v-for="item in tableData" :key="item.id">
        <h2>
          {{item.activityName}}
          <span>{{item.activityStatus == '0' ? '活动暂停' : '已启用'}}</span>
          <p>H5链接：{{item.activityUrl}}?id={{item.id}}</p>
        </h2>
        <table border="1" class="pr-table">
          <thead>
            <tr class="pr-th">
              <th>商品名称</th>
              <th>折扣</th>
              <th>原价</th>
              <th>活动有效期</th>
              <th>活动范围</th>
              <th>操作项</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="3" style="vertical-align: top;">
                <div class="pr-list" v-for="val in item.goodsInfoList" :key="val.id">
                  <p>{{val.goodsName || 'goodsName为空' }}</p>
                  <p>{{val.salevalue}}</p>
                  <p>{{val.distributorGoodsPrice / 100}}</p>
                </div>
              </td>
              <td class="pr-td">
                <p>{{item.activityStarttime}} 至 {{item.activityEndtime}}</p>
                <p class="pr-range"> <span>{{item.day}}</span> </p>
                <p class="pr-range"><span>每日{{ item.starttime | timeToString }}至{{ item.endtime  | timeToString }}</span></p>
                <p class="pr-left">失效时间：{{item.survivalTime}}天后</p>
              </td>
              <td>
                <p class="pr-range">
                  <span v-for="list in item.provinceCityInfoList" :key="list.province">
                    {{list.province}}
                    <template v-for="city in list.chooseList">{{city.cityName}}</template>
                  </span>
                </p>
                <p class="pr-left">活动频次</p>
                <p class="pr-range">
                  <span>每月{{item.mothNum}}次</span><span>每日{{item.dayNum}}次</span><span>每日{{item.limitNum}}名</span>
                </p>
              </td>
              <td>
                <el-button @click.native.prevent="handleOperaClick(item, 'detail')" type="text" size="small">查看详情</el-button>
                <el-button @click.native.prevent="handleOperaClick(item, 'edit')" type="text" size="small">编辑活动</el-button>
                <el-button @click.native.prevent="handleOperaClick(item, 'reno')" type="text" size="small">活动装修</el-button>
                <el-button @click.native.prevent="handleOperaClick(item, 'stop')" type="text" size="small">
                  {{item.activityStatus == '1' ? '活动暂停' : '活动启用'}}
                </el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </li>
    </ul>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
import { getData, postData } from '@/api/'

export default {
  name: 'activityList',
  props: {},
  components: {},
  data() {
    return {
      tableData: [], // 商品活动 列表
      userName: localStorage.getItem('userName')
    }
  },
  watch: {},
  created() {
    this.getList() // 商品活动列表查询
  },
  filters: {
    timeToString: function (value) {
      return dayjs(value).format('HH:mm:ss')
    }
  },
  mounted() { },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 活动添加按钮 事件监听.
     **/
    handleAddClick() {
      console.log('add')
      this.$router.push({ name: 'AddEdit', params: { id: 'add' } })
      // this.$router.push('addEdit')
    },
    /**
     *@Description
     *@Param
     *@Return 查看详情 - 事件监听.
     **/
    handleOperaClick(data, type) {
      switch (type) {
        case 'detail':
          this.$router.push({ name: 'ActivityDetail', params: { id: data.id } })
          break;
        case 'edit':
          this.$router.push({ name: 'AddEdit', params: { id: data.id } })
          // this.$router.push('addEdit')
          break;
        case 'reno':
          this.$router.push({ name: 'ActivityRenovation', params: { id: data.id } })
          break;
        case 'stop':
          // 1：已启用、 0：活动暂停
          if (data.activityStatus == '1') {
            data.activityStatus = '0'
          } else {
            data.activityStatus = '1'
          }
          setTimeout(() => {
            this.updata(data)
          }, 2000)
          break;
      }
    },
    /**
     *@Description
     *@Return 获取商品 活动列表.
     **/
    getList() {
      getData({}, urls.activityListUrl).then(res => {
        const result = res.result
        const obj = { '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六', '7': '七' }
        result.forEach((val, index) => {

          let str = ''
          val.activityStarttime = val.activityStarttime.slice(0, 10)
          val.activityEndtime = val.activityEndtime.slice(0, 10)

          // val.endtime = val.endtime.slice(11, 19)
          // val.starttime = val.starttime.slice(11, 19)
          const a = dayjs().format('YYYY-MM-DD') + ' ' + val.endtime.slice(11, 19)
          const b = dayjs().format('YYYY-MM-DD') + ' ' + val.starttime.slice(11, 19)

          val.endtime = dayjs(a)
          val.starttime = dayjs(b)

          const survivalDayArr = val.survivalDay.split(',').filter(val => { return val && val.trim })

          survivalDayArr.forEach(element => {
            str += '周' + obj[element] + '、'
          });
          val.day = str.slice(0, -1)
          val.diffDay = dayjs(val.activityEndtime).diff(dayjs(val.activityStarttime), 'day') // 不用了
        })
        this.tableData = result
        console.log('获取列表--------', res)
      })
    },
    /**
     *@Description
     *@Return 活动暂停 与 启用 状态切换 --- 使用编辑保存接口.
     **/
    updata(data) {
      postData(data, urls.activitySaveUrl).then(res => {
        this.getList()
        this.$message.success('数据保存成功！')
      })
    },
  }
}

</script>
<style lang="scss" scoped="scoped">
.pr-activity-list {
  background: #fff;
  padding: 10px;
}
//  ul
.pr-card {
  margin-top: 10px;
  li {
    padding: 0 10px 10px 10px;
    margin-bottom: 20px;
    border: 1px solid #dcdcdc;
    h2 {
      padding: 10px 0;
      font-size: 15px;
      span {
        margin-left: 20px;
        padding: 3px 10px;
        font-weight: normal;
        font-size: 12px;
        border-radius: 5px;
        color: rgb(24, 144, 255);
        background: #e6f7ff;
      }
      p {
        float: right;
        font-weight: normal;
      }
    }
  }
}
// 表格区域
.pr-table {
  width: 100%;
  text-align: center;
  font-size: 12px;
  border-collapse: collapse;
  border: 1px solid #dcdcdc;
  th {
    height: 30px;
    font-size: 14px;
    font-weight: normal;
    color: #999;
  }
}
.pr-th {
  th:nth-of-type(1) {
    width: 250px;
  }
  th:nth-of-type(2) {
    width: 80px;
  }
  th:nth-of-type(3) {
    width: 80px;
  }
  th:nth-of-type(4) {
    width: 150px;
  }
  th:nth-of-type(5) {
  }
  th:nth-of-type(6) {
    width: 80px;
  }
}
.pr-list {
  height: 30px;
  line-height: 30px;
  p {
    float: left;
    text-align: center;
  }
  p:nth-of-type(1) {
    width: calc(100% - 160px);
  }
  p:nth-of-type(2) {
    width: 80px;
  }
  p:nth-of-type(3) {
    width: 80px;
  }
  border-bottom: 1px solid #dcdcdc;
}
.pr-range {
  padding: 5px;
  overflow: hidden;
  span {
    float: left;
    margin: 0 2px;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    color: rgb(24, 144, 255);
    background: #e6f7ff;
  }
}
.pr-left {
  padding: 5px;
  text-align: left;
}
::v-deep .el-button {
  margin-left: 0;
}
</style>
